/**
 * Created by lenovo on 2016/9/11.
 */
var c=document.getElementById("canvas");
var context=c.getContext("2d");

function clock(){
//清空
    context.clearRect(0,0,110,100);
//大圆
    context.beginPath();  //起始一条路径
    context.arc(50,60,40,0,2*Math.PI,true);   //创建圆
    context.fillStyle = "#88D2FC";  //填充颜色
    context.fill();
    context.closePath();   //创建从当前点回到起始点的路径
//小圆
    context.beginPath();
    context.arc(50,60,35,0,2*Math.PI,true);
    context.fillStyle = "#FFFFFF";
    context.fill();
    context.closePath();
//中间点
    context.beginPath();
    context.arc(50,60,5,0,2*Math.PI,true);
    context.fillStyle = "#88D2FC";
    context.fill();
    context.closePath();
//左耳
    context.beginPath();
    context.arc(18,36,15,0.6*Math.PI,1.77*Math.PI,false);
    context.fillStyle = "#88D2FC";
    context.fill();
    context.closePath();
//右耳
    context.beginPath();
    context.arc(84,36,15,0.4*Math.PI,1.17*Math.PI,true);
    context.fillStyle = "#88D2FC";
    context.fill();
    context.closePath();
//时间
    var date = new Date();
    var hour = date.getHours();
    hour = hour>12?hour-12:hour;
    var minute = date.getMinutes();
    var second = date.getSeconds();
    var angle = Math.PI;
//时针
    angle = Math.PI - (hour + minute / 60) * 5 * 6 * Math.PI / 180 ;
    context.beginPath();
    context.lineWidth = 5;
    context.strokeStyle = "#88D2FC";
    time(13,angle);
//分针
    angle = Math.PI - (minute + second / 60) * 6 * Math.PI / 180 ;
    context.beginPath();
    context.lineWidth = 3;
    context.strokeStyle = "#88D2FC";
    time(23,angle);
//秒针
    angle = Math.PI - second * 6 * Math.PI / 180;
    context.beginPath();
    context.lineWidth = 1;
    context.strokeStyle = "#88D2FC";
    time(30,angle);


}
clock();
setInterval(clock,1000);

function time(r,angle){
    var x = 50,y = 60;
    if(angle <= Math.PI / 2) {
        x += r * Math.sin(angle);
        y += r * Math.cos(angle);
    } else if(angle > Math.PI / 2 && angle <= Math.PI) {
        angle -= Math.PI / 2;
        x += r * Math.cos(angle);
        y -= r * Math.sin(angle);
    } else if(angle > Math.PI && angle <= 3 * Math.PI / 2) {
        angle -= Math.PI;
        x -= r * Math.sin(angle);
        y -= r * Math.cos(angle);
    } else {
        angle -= 3 * Math.PI / 2;
        x -= r * Math.cos(angle);
        y += r * Math.sin(angle);
    }
    context.moveTo(50,60);
    context.lineTo(x,y);
    context.stroke();
}